<template>
  <div class=".app-container " >
    <div style="height:20px"></div>
    <el-form :model="queryParams" ref="queryForm"   v-show="showSearch" label-width="90px">
      <el-row>
        <el-col span="5" :xs="18">
          <el-form-item label="所属机构" prop="projectAffiliation" >
            <treeselect v-model="queryParams.projectAffiliation" :options="deptOptions" :shpw-count="true" placeholder="请选择所属机构"></treeselect>
          </el-form-item>
        </el-col>
        <el-col span="5" :xs="18" offset="1">
          <el-form-item label="工伤类型" prop="injuryType">
            <el-select v-model="queryParams.injuryType" placeholder="请选择工伤类型"  clearable>
              <el-option label1="轻伤事故" value="轻伤事故"></el-option>
              <el-option label1="重伤事故" value="重伤事故"></el-option>
              <el-option label1="死亡事故" value="死亡事故"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="5" :xs="18" offset="1">
          <el-form-item label="申报人姓名" prop="declareName">
            <el-input
              v-model="queryParams.declareName"
              placeholder="请输入申报人姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col span="5" :xs="18" offset="1">
          <el-form-item label="申报人部门" >
            <treeselect v-model="queryParams.declareBranch" :options="deptOptions" :shpw-count="true" placeholder="请选择申报人部门"></treeselect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5" :xs="18">
          <el-form-item label="项目状态" prop="injuryStatus"  >
            <el-select v-model="queryParams.injuryStatus" placeholder="请选择" clearable  @keyup.enter.native="handleQuery">
              <el-option label="所有" ></el-option>
              <el-option label="正常" value=0></el-option>
              <el-option label="停用" value=1></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="5" :xs="18" offset="1">
          <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" >搜索</el-button>
          <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd" v-hasPermi="['xmsts:promanage:add']">新增</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 显示详情 -->
    <el-drawer size="48%"  :visible.sync="dialog" direction="rtl"  >
      <el-descriptions title="工伤申报详情" size="medium" :column="2"  border>
        <el-descriptions-item label="申报人姓名" prop="declareName">{{form.declareName}} </el-descriptions-item>
        <el-descriptions-item label="申报人性别" prop="declareSex">{{form.declareSex}} </el-descriptions-item>
        <el-descriptions-item label="事故名称" prop="accidentName">{{form.accidentName}} </el-descriptions-item>
        <el-descriptions-item label="事故发生时间" prop="accidentDate">{{form.accidentDate}} </el-descriptions-item>
        <el-descriptions-item label="工伤类型" prop="injuryType">{{form.injuryType}} </el-descriptions-item>
        <el-descriptions-item label="申报日期" prop="declareDate">{{form.declareDate}} </el-descriptions-item>
        <el-descriptions-item label="损失工时" prop="lossTime">{{form.lossTime}} </el-descriptions-item>
        <el-descriptions-item label="就诊医院" prop="clinicHospital">{{form.clinicHospital}} </el-descriptions-item>
        <el-descriptions-item label="材料是否齐全" prop="materialComplete">{{form.materialComplete}} </el-descriptions-item>
        <el-descriptions-item label="就诊结果" prop="diagnosisResult">{{form.diagnosisResult}} </el-descriptions-item>
        <el-descriptions-item label="注意事项" prop="noticeMatters">{{form.noticeMatters}} </el-descriptions-item>
        <el-descriptions-item label="备注" prop="note">{{form.note}} </el-descriptions-item>
      </el-descriptions>
    </el-drawer>


    <!-- 表格数据 -->
    <div label-width="900px">
      <el-table v-loading="loading"
                :data="injuryList"
                border
                :default-sort="{prop:'injuryStatus'}"
                max-height="350">
        <el-table-column label="所属机构" align="center" prop="dept1.deptName" width="200"/>
        <el-table-column label="申报人姓名" align="center" prop="declareName" width="200"/>
        <el-table-column label="申报人性别" align="center" prop="declareSex" width="200"/>
        <el-table-column label="申报人部门" align="center" prop="dept.deptName" width="200" />
        <el-table-column label="事故名称" align="center" prop="accidentName" width="200"/>
        <el-table-column label="事故发生时间" align="center" prop="accidentDate" width="200"/>
        <el-table-column label="工伤类型" align="center" prop="injuryType" width="200"/>
        <el-table-column label="申报日期" align="center" prop="declareDate" width="200"/>
        <el-table-column prop="injuryStatus" label="状态" sortable align="center" width="200">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.injuryStatus==0">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.injuryStatus==1">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"  width="150" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['sggl:injury:edit']"
            >编辑</el-button>
            <!-- 查看详情 -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-look"
              @click="handelOpen(scope.row)"
              v-hasPermi="['sggl:injury:query']"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['sggl:injury:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="40%" class="roll-dialog" close="clearUploadFile" >
      <div class="el-dialog-div">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-row>
            <el-col span="12" :xs="18">
              <el-form-item label="所属机构"  prop="projectAffiliation">
                <treeselect v-model="form.projectAffiliation" :options="deptOptions" :shpw-count="true" placeholder="请选择所属机构"></treeselect>
              </el-form-item>
            </el-col>
            <el-col span="11" :xs="18" :offset="1">
              <el-form-item label="申报人姓名" prop="declareName">
                <el-input v-model="form.declareName" placeholder="请输入申报人姓名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12" :xs="18">
              <el-form-item label="申报人性别" prop="declareSex">
                <el-select v-model="form.declareSex" placeholder="请选择">
                  <el-option label1="男" value="男"></el-option>
                  <el-option label1="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="11" :xs="18" :offset="1">
              <el-form-item label="申报人部门" prop="declareBranch">
                <treeselect v-model="form.declareBranch" :options="deptOptions" :shpw-count="true" placeholder="申报人部门"></treeselect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12" :xs="18">
              <el-form-item label="事故名称" prop="accidentName">
                <el-input v-model="form.accidentName" placeholder="请输入事故名称" />
              </el-form-item>
            </el-col>
            <el-col span="11" :xs="18" :offset="1">
              <el-form-item label="事故发生时间" prop="accidentDate" >
                <el-date-picker clearable
                                v-model="form.accidentDate"
                                type="date"
                                :label-width="'100px'"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择申报日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>


            <el-col span="12" :xs="18">
              <el-form-item label="工伤类型" prop="injuryType">
                <el-select v-model="form.injuryType" placeholder="请选择工伤类型" >
                  <el-option label1="轻伤事故" value="轻伤事故"></el-option>
                  <el-option label1="重伤事故" value="重伤事故"></el-option>
                  <el-option label1="死亡事故" value="死亡事故"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="11" :xs="18" :offset="1">
              <el-form-item label="申报日期" prop="declareDate">
                <el-date-picker clearable
                                v-model="form.declareDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择申报日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12" :xs="18">
              <el-form-item label="损失工时" prop="lossTime">
                <el-input v-model="form.lossTime" placeholder="请输入损失工时" />
              </el-form-item>
            </el-col>
            <el-col span="11" :xs="18" :offset="1">
              <el-form-item label="就诊医院" prop="clinicHospital">
                <el-input v-model="form.clinicHospital" placeholder="请输入就诊医院" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24" :xs="18">
              <el-form-item label="材料是否齐全" prop="materialComplete">
                <el-radio v-model="form.materialComplete" label="是">是</el-radio>
                <el-radio v-model="form.materialComplete" label="否">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24" :xs="18">
              <el-form-item label="就诊结果" prop="diagnosisResult" style="width: 100%">
                <el-input v-model="form.diagnosisResult" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24" :xs="18">
              <el-form-item label="上传附件" prop="attachment">
                <el-upload ref="attachment"
                           :file-list="manageList"
                           :action="field101Action"
                           :before-upload="field101BeforeUpload">
                  <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24" :xs="18">
              <el-form-item label="注意事项" prop="noticeMatters" style="width: 100%">
                <el-input v-model="form.noticeMatters" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24" :xs="18">
              <el-form-item label="备注" prop="note" style="width: 100%">
                <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 单选框 -->
          <el-form-item label="状态" prop="injuryStatus">
            <el-radio v-model="form.injuryStatus" label="0">启用</el-radio>
            <el-radio v-model="form.injuryStatus" label="1">停用</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInjury,getInjury,addInjury, updateInjury,delInjury,getDeptList} from "@/api/system/injurydeclare";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


export default {
  components: { Treeselect },
  name: "injury",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //表格数据
      injuryList: [],
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,
      // 是否显示弹出层
      open: false,
      //抽屉
      dialog: false,
      // 上传参数
      projectAttachment: undefined,
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectAffiliation:null,
        injuryType:null,
        declareName:null,
        declareBranch:null,
        injuryStatus:null

      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        projectAffiliation: [
          { required: true, message: "'所属机构'是必填项。", trigger: "blur" }
        ],
        declareName: [
          { required: true, message: "'申报人姓名'是必填项。", trigger: "blur" }
        ],
        declareSex: [
          { required: true, message: "'申报人性别'是必填项。", trigger: "blur" }
        ],
        declareBranch: [
          { required: true, message: "'申报人部门'是必填项。", trigger: "blur" }
        ],
        accidentName: [
          { required: true, message: "'事故名称'是必填项。", trigger: "blur" }
        ],
        accidentDate: [
          { required: true, message: "'事故发生时间'是必填项。", trigger: "blur" }
        ],
        injuryType: [
          { required: true, message: "'工伤类型'是必填项。", trigger: "blur" }
        ],
        field101Action: 'https://jsonplaceholder.typicode.com/posts/',
        field101fileList: [],
      },


    };
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    getDeptTree() {
      getDeptList().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listInjury(this.queryParams).then(response => {
        this.injuryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel(){
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        projectAffiliation: null,
        declareName: null,
        declareSex: null,
        declareBranch: null,
        accidentName:null,
        accidentDate:null,
        injuryType:null,
        declareDate: null,
        lossTime: null,
        clinicHospital: null,
        materialComplete:"1",
        diagnosisResult:null,
        attachment: null,
        noticeMatters: null,
        note: null,
        injuryStatus: "0",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**显示详细信息*/
    handelOpen(row) {
      this.reset();
      const injuryId = row.injuryId
      getInjury(injuryId).then(response => {
        this.form = response.data;
        this.dialog = true
        infoList_detial(scope.row.injuryId)
      });

    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open=true;
      this.title = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.open=true;
      const injuryId = row.injuryId
      getInjury(injuryId).then(response => {
        this.form = response.data;
        this.title = "修改";
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const injuryId = row.injuryId || this.ids
      this.$modal.confirm('是否确认删除申报人为"' + row.declareName + '"的数据项？').then(function() {
        return delInjury(injuryId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.injuryId != null) {
            updateInjury(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInjury(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 文件上传成功处理
    field101BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },

  }
};

</script>

<style scoped>
.el-tag {
  margin: 7px;
}

.roll-dialog .el-dialog__body {
  padding: 3px 30px;
  overflow-y: 60vh;
  height: calc(100vh - 140px);
}

.el-dialog-div {
  height: 60vh;
  overflow: auto;
}
</style>
